<template>
	<view class="cu-page">
		<nav-bar></nav-bar>
		<view class="wallpaper-box">
			<swiper class="swiper-container-new" :current="current">
				<swiper-item class="swiper-item-new" v-for="(item,index) in list" v-key="index">
					<image class="image-item-new" mode="aspectFill" :src="item.detailUrl"></image>
				</swiper-item>
			</swiper>
			<view class="wallpaper-options">
				<button class="botton-options-item u-reset-button" :plain="true" v-if="list[current].collect">
					<image class="botton-options-item-icon" mode="aspectFit" src="../../static/icons/zan1.png"></image>
					<text class="botton-options-item-text">{{(list[current].collect_times||'')+' 赞'}}</text>
				</button>
				<button class="botton-options-item u-reset-button" :plain="true" v-else>
					<image class="botton-options-item-icon" mode="aspectFit" src="../../static/icons/zan0.png"></image>
					<text class="botton-options-item-text">{{(list[current].collect_times||'')+' 赞'}}</text>
				</button>
				<view class="botton-options-download cu-flex-center">
					<view class="botton-options-download-view cu-flex-center">
						<image class="botton-options-download-icon" mode="aspectFit" src="../../static/icons/download.png"></image>
					</view>
				</view>
				<button class="botton-options-item u-reset-button" openType="share" :plain="true">
					<image class="botton-options-item-icon" mode="aspectFit" src="../../static/icons/share.png"></image>
					<text class="botton-options-item-text">分享</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [],
				deviceInfo: "",
				isLogin: !1,
				isLoadAd: !1,
				myInfo: null,
				randomWallpaperList: [],
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				isPc: !1
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.swiper-container {
    width: 100vw;
    height: 100vh;
}

.wallpaper-box {
    width: 690rpx;
    height: 920rpx;
    border-radius: 42rpx;
    margin-left: 30rpx;
    margin-top: 30rpx;
}

.swiper-container-new {
    width: 690rpx;
    height: 754rpx;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.image-item-new,.swiper-item-new {
    width: 690rpx;
    height: 754rpx;
    border-radius: 42rpx 42rpx 0rpx 0rpx;
}

.wallpaper-options {
    width: 690rpx;
    height: 166rpx;
    background-color: #202020;
    border-radius: 0rpx 0rpx 42rpx 42rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.image-box {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    border-radius: 42rpx 42rpx 0rpx 0rpx;
}

.swiper-item {
    width: 100vw;
}

.image-item {
    width: 100vw;
    height: 100vh;
}

.botton-options {
    width: 750rpx;
    position: fixed;
    bottom: 0;
    z-index: 9999999;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.botton-options-content {
    width: 500rpx;
    background-color: rgba(20,20,20,.6);
    backdrop-filter: blur(10px);
    margin-bottom: 40rpx;
    border-radius: 1000rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.botton-options-content,.botton-options-item {
    height: 120rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.botton-options-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    border: none;
    width: 175rpx;
}

.botton-options-item-icon {
    width: 46rpx;
    height: 46rpx;
}

.botton-options-item-text {
    font-size: 22rpx;
    color: hsla(0,0%,100%,.5);
    margin-top: 20rpx;
}

.botton-options-download {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
}

.botton-options-download-view {
    width: 130rpx;
    height: 130rpx;
    background-color: #444;
    border-radius: 50%;
    z-index: 9;
}

.botton-options-download-icon {
    width: 60rpx;
    height: 60rpx;
}

.download-box {
    width: 690rpx;
    background-color: hsla(0,0%,100%,.7);
    backdrop-filter: blur(10px);
    border-radius: 10rpx;
}

.download-item {
    width: 630rpx;
    margin-left: 30rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}

.download-item-left {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.download-item-left-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #000;
}

.download-item-left-tip {
    width: 390rpx;
    font-size: 26rpx;
    color: rgba(0,0,0,.5);
    margin-top: 10rpx;
}

.download-item-right {
    height: 66rpx;
    background-color: #000;
    padding-left: 50rpx;
    padding-right: 50rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #fff;
}

.bottom-border {
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.info-box {
    width: 690rpx;
    background-color: hsla(0,0%,100%,.7);
    backdrop-filter: blur(10px);
    border-radius: 10rpx;
}

.info-item {
    width: 630rpx;
    margin-left: 30rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}

.info-item-title {
    font-size: 28rpx;
    color: rgba(0,0,0,.7);
}

.info-item-content {
    font-size: 28rpx;
    color: rgba(0,0,0,.5);
}

.right-arrows {
    width: 20rpx;
    height: 20rpx;
    border-top: 2px solid rgba(0,0,0,.3);
    border-right: 2px solid rgba(0,0,0,.3);
    transform: rotate(45deg);
}

.tag-box {
    width: 750rpx;
    padding: 16rpx 30rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
}

.tag-box-item {
    height: 52rpx;
    line-height: 52rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    background-color: hsla(0,0%,100%,.06);
    border-radius: 32rpx;
    margin-right: 14rpx;
    margin-top: 14rpx;
}

.wallpaper-info-box {
    width: 750rpx;
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.wallpaper-info-item {
    width: 336rpx;
    height: 104rpx;
    background: hsla(0,0%,100%,.06);
    border-radius: 12rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 30rpx;
    margin-top: 20rpx;
}

.wallpaper-info-item-icon {
    width: 44rpx;
    height: 44rpx;
}

.wallpaper-info-item-text {
    font-size: 24rpx;
    color: #fff;
    margin-left: 20rpx;
}

.top-nav-image {
    width: 70rpx;
    height: 70rpx;
    position: fixed;
    top: 0;
    z-index: 9999999;
    left: 30rpx;
}

.download-choose-box {
    width: 750rpx;
    display: flex;
    padding: 0 30rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
    z-index: 9999;
}

.download-choose-item {
    width: 330rpx;
    height: 410rpx;
    background-color: hsla(0,0%,100%,.7);
    backdrop-filter: blur(10px);
    border-radius: 18rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-top: 56rpx;
    padding-bottom: 36rpx;
}

.download-choose-item-top,.download-choose-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.download-choose-item-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
}

.download-choose-item-subtitle {
    font-size: 22rpx;
    color: #272727;
    margin-top: 12rpx;
    padding-left: 16rpx;
    padding-right: 16rpx;
    text-align: center;
}

.download-choose-item-line {
    width: 182rpx;
    height: 1px;
    background-color: rgba(0,0,0,.06);
}

.download-choose-item-btn {
    width: 154rpx;
    height: 70rpx;
    background: #272727;
    border-radius: 14rpx;
    color: #fff;
    font-size: 26rpx;
}

.download-choose-vip-box {
    width: 250rpx;
    height: 44rpx;
    background: #fc0;
    border-radius: 6rpx;
    margin-top: 12rpx;
}

.download-choose-vip-image {
    width: 26rpx;
    height: 26rpx;
}

.download-choose-vip-text {
    font-size: 22rpx;
    color: #000;
    margin-left: 8rpx;
}

.big-image {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.9);
}

.big-image-self {
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.pc-notice {
    width: 100vw;
    height: 80rpx;
    opacity: .7;
}
</style>
